<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./layui.css">
</head>

<body>
    <fieldset class="layui-elem-field">
        <legend>要求</legend>
        <div class="layui-field-box">
            1.完成基本布局；有代码注释50%以上，商品类别为优选水果、卤味熟食、饮料酒水、休闲零食四类。<br>
            2.点击提交表单将提交的内容显示在表格的最上面; 提交后清空输入框的内容; 表单各项不允许为空; 原价，现价，数量必须为数字;<br>
            3.奇数行背景色为白色（white); <br>偶数行背景灰为(#FAFAFA)；完成删除功能，点击删除，删除数据
        </div>
    </fieldset>
    <form class="layui-form" action="" >
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input goodsName">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品类别</label>
            <div class="layui-input-block">
                <select class="goodsType" style="display:block">
                    <option>优选水果</option>
                    <option>卤味熟食</option>
                    <option>饮料酒水</option>
                    <option>休闲零食</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品原价</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input marketPrice">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品现价</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input shopPrice">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品数量</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input goodsNumber">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn">立即提交</button>
            </div>
        </div>
    </form>
    <table class="layui-table">
        <thead>
            <tr>
                <th>商品名称</th>
                <th>商品类别</th>
                <th>商品原价</th>
                <th>商品现价</th>
                <th>商品数量</th>
                <th>删除</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <!-- <script>

        var _value = "优选水果"
        //利用onchange来获取下拉菜单的值
        document.querySelector(".goodsType").onchange = function () {
            _value = this.value


        }
        //给立即提交添加监听事件
        document.querySelector(".layui-btn").addEventListener("click", function () {
            // console.log(1111)
            // document.querySelector('tbody').innerHTML=''
            //获取输入框的值
            var goodsName = document.querySelector('.goodsName').value;
            var marketPrice = document.querySelector('.marketPrice').value
            var shopPrice = document.querySelector('.shopPrice').value;
            var goodsNumber = document.querySelector('.goodsNumber').value;
            // console.log((parseInt( marketPrice) !=  /^[0-9]*$/ ))
            if (goodsName == "") {
                alert("表单各项不允许为空")
            }
            else if (marketPrice == "") {
                alert("表单各项不允许为空")
            } else if (shopPrice == "") {
                alert("表单各项不允许为空")
            } else if (!/^[0-9]*$/.test(marketPrice)) {
                alert("原价必须为数字")
            } else if (!/^[0-9]*$/.test(shopPrice)) {
                alert("现价必须为数字")
            } else if (!/^[0-9]*$/.test(goodsNumber)) {
                alert("数量必须为数字")
            } else {
                // 表格中追加内容
                var html = `<tr>
                            <td>${goodsName}</td>
                            <td>${_value}</td>
                            <td>${marketPrice}</td>
                            <td>${shopPrice}</td>
                            <td>${goodsNumber}</td>
                            <td><button class= "delete" onclick = "deleteTr(this)">删除</button></td>
                            </tr>`

                // 将表格内容加入到页面
                document.querySelector('tbody').innerHTML = document.querySelector('tbody').innerHTML + html;
            }


            //    console.log (document.querySelector("tbody tr"))

            //给偶数行添加背景颜色 #fafafa
            let trDom = document.querySelectorAll("tbody tr");
            trDom.forEach(function (item, i) {
                if (i % 2 == 1) {
                    item.style.background = `#fafafa`
                } else {
                    item.style.background = `white`
                }
            })

        })



        //删除按钮
        function deleteTr(obj) {
            //获取到当前点击的dom对象对应的父级元素
            //parentElement表示获取到上一级的dom对象
            //传递的obj参数是当前的dom对象
            var trDom = obj.parentElement.parentElement;
            document.querySelector("tbody").removeChild(trDom)
        }

        //阻止form表单提交
        function checkForm() {
            // console.log(1)
            return false;
        }

    </script> -->
</body>

</html>
<script>
    // 保存数据
    let data = [];
    document.querySelector('.layui-btn').onclick = function(){
        // 获取表单数据
        let goodsName = document.querySelector('.goodsName');
        let goodsType = document.querySelector('.goodsType');
        let marketPrice = document.querySelector('.marketPrice');
        let shopPrice = document.querySelector('.shopPrice');
        let goodsNumber = document.querySelector('.goodsNumber');
        // 要求数字
        let reg = /^\d+$/i;
        if(!goodsName.value || !marketPrice.value || !shopPrice.value || !goodsNumber.value){
            alert('内容必须输入')
            return false;
        }
        if(!reg.test(marketPrice.value) || !reg.test(shopPrice.value) || !reg.test(goodsNumber.value)){
            alert('输入的必须是数字')
            return false;
        }
        // 将表格的数据加入到data变量中
        data.push({
            goodsName:goodsName.value,
            goodsType:goodsType.value,
            marketPrice:marketPrice.value,
            shopPrice:shopPrice.value,
            goodsNumber:goodsNumber.value,
        })
        showData();


        return false;
    }
    // 删除功能
    document.querySelector('tbody').addEventListener('click',function(event){
        if(event.target.nodeName == 'BUTTON'){
            let index = event.target.getAttribute('data-index');
            data.splice(index,1);
            showData();
        }
    })
    function showData(){
        let html = '';
        data.forEach((item,index)=>{
            html += `<tr style="background-color:${index%2 ==1?'#FAFAFA':'white'}">
                <th>${item.goodsName}</th>
                <th>${item.goodsType}</th>
                <th>${item.marketPrice}</th>
                <th>${item.shopPrice}</th>
                <th>${item.goodsNumber}</th>
                <th><button type="button" data-index="${index}">删除</button></th>
            </tr>`
        })
        document.querySelector('tbody').innerHTML = html;
    }
</script>